<template>
    <div class="pd-20">
        <el-form :model="form" label-width="80px" ref="form">

            <el-form-item label="名称">
                <el-input placeholder="请输入名称" style="width:500px" v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="上级ID">
                <treeSelect :props="props"></treeSelect>
            </el-form-item>

            <el-form-item label="排序">
                <el-input placeholder="请输入排序号" style="width:500px" v-model="form.username"></el-input>
            </el-form-item>

            <!-- 选择类型 -->
            <el-form-item label="类型">
                <el-select v-model="form.role_id" placeholder="选择类型">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value">
                    </el-option> 
                </el-select>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="disable" @change="disableFun" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item>

            <el-form-item label="图标" >
                <SelectIcon @custom-event="eventFun"></SelectIcon>    
            </el-form-item>

            <el-form-item>
                <el-button type="primary" style="width: 470px;margin: 30px auto;" @click="submit">提交</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import SelectIcon from '@/components/SelectIcon/index'
import VueEditor from '@/components/Editor/index' // ES6 Module
export default {
    components: {
        medium,
        VueEditor,
        SelectIcon,
        treeSelect
    },
    data() {
        return {
            form: {
                username: '',
                password: '',
                nickname: '',
                role_id: '',
                avatar: '',
                disable: 1,
                icon:""
            },
            cate: [],
            type: 'create',//判断状态
            loading: false,
            init: false,
            disable: true,
            typeList: [
                {
                    name:'主题',
                    value:'theme'
                },
                {
                    name:'排序',
                    value:'sort'
                },
                {
                    name:'其他',
                    value:'another'
                }
            ],
            confirmPassword: '',
            page: 1,
            props:{
                value:"id",
                label:"name",
                children:"childrens",
            }
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.type = 'update'
            this.getAdministrators(this.$route.query.id)

        } else {
            this.init = true
        }
    },
    methods: {
        eventFun(data){
          console.log(data)
          this.form.icon = data
        },
        more() {
            this.page++
        },

        //根据id获取管理员
        getAdministrators(id) {
            this.$request.get('/admin/get/' + id,).then((res) => {
                // this.form.username = res.username
                // this.form.nickname = res.nickname
                // this.form.role_id = res.role_id
                // this.form.avatar = res.avatar
                // this.form.disable = res.disable
                this.form = res
                console.log("res.data", res)
                this.disable = this.form.disable == 1 ? true : false
                // this.init=true
            })
        },
        toAdministrators() {
            this.$router.push({ path: 'index' })
        },

        setMedium(value) {
            this.form.avatar = value
            console.log("value", value)
        },

        disableFun(res) {
            this.form.disable = res ? 1 : 0
            this.disable = res
        },
        submit() {
            if (!(this.form.username && this.form.password && this.form.nickname && this.form.role_id && this.form.username)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                return
            }

            if (this.form.password != this.confirmPassword) {
                this.$message({
                    message: '两次密码输入不一致',
                    type: 'warning'
                });
                return
            }


            if (this.type == 'create') {
                this.$request.post('/admin/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.toAdministrators()
                })
            } else {
                this.$request.put('/admin/update/' + this.$route.query.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.toAdministrators()
                })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>